<template>
  <div class="row q-ma-xs bg-grey-3 border-radius-4">
    <form action="" @submit.prevent="search" class="col">
      <q-search
        v-model="keyword"
        class="no-shadow"
        :autofocus="$q.screen.gt.md"
        placeholder="搜索内容"
        inverted-light color=""
        type="text"
        :after="[{icon: 'close', error: false, handler () {close()}}]"
        icon="search">
      </q-search>
    </form>
    <q-btn v-if="keyword && $q.screen.lt.md" class="q-px-sm" color="grey-8" flat @click="search">
      <q-icon name="arrow_forward" class="size-22"/>
    </q-btn>
  </div>
</template>

<script>
  export default {
    name: 'aSearch',
    props: {},
    data() {
      return {
        keyword: ''
      }
    },
    created() {
      this.keyword = this.$route.params.keyword
    },
    computed: {},
    watch: {},
    methods: {
      search() {
        if (!this.keyword) {
          return
        }
        const history = this.$route.path

        let model = 'article'
        let match = history.match(/^\/(topic|article|map|forum)\//)

        if (match) {
          model = match[1]
        } else {
          match = history.match(/^\/(search)\/(topic|article|map|forum|user)\//)
          if (match) {
            model = match[2]
          }
        }

        this.$router.push({path: `/search/${model}/${this.keyword}/`})
      },
      close() {
        this.$emit('close')
      }
    }
  }
</script>

<style lang="stylus">
</style>
